<template>
	<view>

<view class="flex-col section_7 space-y-12">
  <view class="flex-row justify-between items-baseline">
    <text class="font_6">宠物服务</text>
    <text class="font_2 text_8">价格便宜 | 担保交易</text>
  </view>


  	  <view >
  <block v-if="isSlided">
  	<swiper :autoplay="isSlidedAuto" :interval="interval" :indicator-dots="indicatorDots"
  		:indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor"
  		:style="'height:'+ swiperHeight +'rpx'">
  		<swiper-item v-for="(item,index) in newList" :key="index">
  			<view class="menu-box">
  				<view v-for="(self, idx) in item" :key="idx" class="menu-item" @click="handleOnClick(self)">
					<view v-if="self &&  self.name" @click="go('/pages/search/list?cateId='+self.id)"  class="cateitem flex-col justify-start items-center " :class="'text-wrapper_'+(idx+2)" >
					{{self.name}}
					</view>
  				</view>
  			</view>
  		</swiper-item>



  	</swiper>
  </block>
  <block v-else>
  	<view class="menu-box">
  		<!-- <view v-for="(item, index) in List" :key="index" class="menu-item" @click="handleOnClick(item)">
  			<image class="menu-item-img" :src="item.url" mode=""
  				:style="'width:'+imgHeight+'rpx;' + 'height:'+imgHeight+'rpx;'"></image>
  			<view class="menu-item-text" >{{item.name}}</view>
  		</view> -->
  	</view>
  </block>
    </view>

</view>





		<!-- <liu-slide-menu  :List="List" :imgHeight="84" isSlided :rowNum="1" :indicatorActiveColor="'#3A76EE'" @clickItem="clickItem"></liu-slide-menu> -->




	</view>
</template>

<script>
	const API = require('@/utils/api/shops.js').default;
	const $ = require('@/utils/api.js');
	let self;
	export default {
		props: {
			shopId: {
				type: String,
				default: ''
			},
			type: {
				default: ''
			},
			showType: {
				default: 1,
			},
			pageSize: {
				default: 20
			},
			catePid: {
				default: ''
			},
			cateTid: {
				default: ''
			},
			cateId: {
				default: ''
			},
			isSpread: {
				default: false
			},


			// // 菜单选项数据
			// List: {
			// 	type: Array,
			// 	default () {
			// 		return []
			// 	}
			// },
			//图标高度（rpx）
			imgHeight: {
				type: Number,
				default: 0
			},
			//是否 可以滑动
			isSlided: {
				type: Boolean,
				default: true
			},
			//滑动每页展示几行
			rowNum: {
				type: Number,
				default: 1
			},
			//是否 自动滑动
			isSlidedAuto: {
				type: Boolean,
				default: false
			},
			//是否展示指示点
			indicatorDots: {
				type: Boolean,
				default: false
			},
			//指示点颜色
			indicatorColor: {
				type: String,
				default: 'rgba(213,215,221, 1)'
			},
			//指示点选中颜色
			indicatorActiveColor: {
				type: String,
				default: 'rgba(40, 124, 248, 1)'
			},
			//自动切换时间间隔
			interval: {
				type: Number,
				default: 5000
			}
		},
		data() {
			return {
				newList: [],
				swiperHeight: 0,
				top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
				isIphonex: uni.getStorageSync('isIphonex') ? uni.getStorageSync('isIphonex') : false,
				list: [],
				page: 1,
				totalPage: 1,
				sort: '',
				sortType: 1,
				title: ''
			};
		},

		mounted() {
			// if (this.isSlided) {
			// 	this.swiperHeight = (parseInt(this.imgHeight) + 70) * parseInt(this.rowNum)
			// 	// this.swiperHeight = (parseInt(this.imgHeight) ) * parseInt(this.rowNum)
			// 	if (this.indicatorDots) this.swiperHeight = this.swiperHeight + 50
			// 	let len = 5 * parseInt(this.rowNum)
			// 	var dataArr = new Array(Math.ceil(this.List.length / len));
			// 	for (let i = 0; i < dataArr.length; i++) {
			// 		dataArr[i] = new Array();
			// 		for (let j = 0; j < len; j++) {
			// 			dataArr[i][j] = '';
			// 		}
			// 	}
			// 	for (let i = 0; i < this.List.length; i++) {
			// 		if( this.List[i].name){
			// 			dataArr[parseInt(i / len)][i % len] = this.List[i];
			// 		}

			// 	}
			// 	this.newList = dataArr
			// }
		},
		methods: {

			handleOnClick(item) {
				this.$emit("clickItem", item)
			},
			changeSort(type) {
				if(type == 'price'){
					this.sort = this.sort == 'price desc' ? 'price asc' : 'price desc';
				}else{
					this.sort = type;
				}
				this.page = 1;
				this.getList();
			},
			formatData(){
				if (this.isSlided) {
					this.swiperHeight = (parseInt(this.imgHeight) + 70) * parseInt(this.rowNum)
					// this.swiperHeight = (parseInt(this.imgHeight) ) * parseInt(this.rowNum)
					if (this.indicatorDots) this.swiperHeight = this.swiperHeight + 50
					let len = 5 * parseInt(this.rowNum)
					var dataArr = new Array(Math.ceil(this.List.length / len));
					for (let i = 0; i < dataArr.length; i++) {
						dataArr[i] = new Array();
						for (let j = 0; j < len; j++) {
							  dataArr[i][j] = null;
						}
					}
					for (let i = 0; i < this.List.length; i++) {
						if( this.List[i]){
							dataArr[parseInt(i / len)][i % len] = this.List[i];
						}
					}
					this.newList = dataArr
					console.log(this.newList)
				}
			},
			getList() {
				$.ajax({
					url: API.goodsCateApi,
					data: {

						type: 2,//1普通>>2服务
						sort: self.sort,
						status: '',
						page: self.page,
						pageSize: self.pageSize,
						spreadStatus: self.isSpread ? '1' : '',
					},
					method: 'GET',
					success(res) {
							console.log(res)
						let list = [];
						if (self.page != 1) {
							list = self.list.concat(res.data);
						} else {
							list = res.data ? res.data : [];
						}
						self.totalPage = res.data.totalPage;
						self.List  = list;
						self.formatData();

					}
				})
			},
			loadMore() {
				if(this.page < this.totalPage) {
					this.page += 1;
					this.getList();
				}
			},
			init() {
				this.page = 1;
				this.getList();
			},
		},
		created() {
			self = this;
			this.init();
		},
		computed: {
			i18n() {
				return this.$t('search')
			},
		},
		onReachBottom() {
		}
	}
</script>

<style scoped>
	@import url('../../../static/css/shops/shops.css');



	.font_2 {
  font-size: 24rpx;
  font-family: HarmonyOSSansSC;
  line-height: 22rpx;
  color: #666e7a;
}
.section_7 {
  padding: 28rpx 16rpx 28rpx 20rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  filter: drop-shadow(0px 0px 8rpx #ffbd5208);
  overflow: hidden;
}
.space-y-12 > view:not(:first-child),
.space-y-12 > text:not(:first-child),
.space-y-12 > image:not(:first-child) {
  margin-top: 24rpx;
}
.font_6 {
  font-size: 32rpx;
  font-family: HarmonyOSSansSC;
  line-height: 30rpx;
  color: #081329;
}
.text_8 {
  line-height: 23rpx;
  opacity: 0.6;
}
.space-x-8 > view:not(:first-child),
.space-x-8 > text:not(:first-child),
.space-x-8 > image:not(:first-child) {
  margin-left: 16rpx;
}
.cateitem{
	  margin-right: 4rpx;
	  padding: 20rpx 0;
	  flex: 1 1 120rpx;
	  border-radius: 10rpx;
	  overflow: hidden;
	  /* font-size:18rpx; */
	  /* height: 80rpx; */
}
.text-wrapper_2 {background-color: #ffbd521a;}
.text-wrapper_3 {background-color: #6d6a6b1a}
.text-wrapper_4 {background-color: #9093ff1a;}
.text-wrapper_5 {background-color: #fe507e1a;}
.text-wrapper_6 {background-color: #5ab2ff1a;}
.text-wrapper_7 {background-color: #ffbd521a;}
.text-wrapper_8 {background-color: #6d6a6b1a}
.text-wrapper_9 {background-color: #9093ff1a;}
.text-wrapper_10 {background-color: #fe507e1a;}
.text-wrapper_11 {background-color: #5ab2ff1a;}
.text-wrapper_12 {background-color: #ffbd521a;}
.text-wrapper_13 {background-color: #6d6a6b1a}
.text-wrapper_14 {background-color: #9093ff1a;}
.text-wrapper_15 {background-color: #fe507e1a;}
.text-wrapper_16 {background-color: #5ab2ff1a;}
.text-wrapper_17 {background-color: #ffbd521a;}
.text-wrapper_18 {background-color: #6d6a6b1a}
.text-wrapper_19 {background-color: #9093ff1a;}
</style>



<style scoped>
	.menu-box {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		/* grid-gap: 10rpx; */
	}

	.menu-item-img {
		display: flex;
		margin: 14rpx auto;
	}

	.menu-item-text {
		font-size: 18rpx;
		text-align: center;
	}
</style>
